<template><div><h1 id="qrcode" tabindex="-1"><a class="header-anchor" href="#qrcode" aria-hidden="true">#</a> qrcode</h1>
<h3 id="vue3" tabindex="-1"><a class="header-anchor" href="#vue3" aria-hidden="true">#</a> vue3</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>npm install <span class="token operator">--</span>save qrcode<span class="token punctuation">.</span>vue
<span class="token comment">//  使用</span>
<span class="token keyword">import</span> QrcodeVue <span class="token keyword">from</span> <span class="token string">"qrcode.vue"</span><span class="token punctuation">;</span> 	
<span class="token operator">&lt;</span>qrcode<span class="token operator">-</span>vue <span class="token operator">:</span>value<span class="token operator">=</span><span class="token string">"'2121212121'"</span> <span class="token operator">:</span>size<span class="token operator">=</span><span class="token string">"150"</span> level<span class="token operator">=</span><span class="token string">"H"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"qrcode"</span> <span class="token operator">/</span><span class="token operator">></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><table>
<thead>
<tr>
<th><strong>参数</strong></th>
<th><strong>说明</strong></th>
<th><strong>类型</strong></th>
<th><strong>默认值</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>二维码的内容值</td>
<td>string</td>
<td></td>
</tr>
<tr>
<td>size</td>
<td>二维码大小</td>
<td>number</td>
<td>100</td>
</tr>
<tr>
<td>render-as</td>
<td>生成二维码的 HTML 标签，可选 canvas 或 svg。其中 svg 可以用于 SSR</td>
<td>string('canvas' | 'svg')</td>
<td>canvas</td>
</tr>
<tr>
<td>margin</td>
<td>定义空白区的宽度应该是多少</td>
<td>number</td>
<td>0</td>
</tr>
<tr>
<td>level</td>
<td>二维码的容错能力等级，取值为 'L', 'M', 'Q', 'H' 之一</td>
<td>string('L' | 'M' | 'Q' | 'H')</td>
<td>H</td>
</tr>
<tr>
<td>background</td>
<td>二维码背景颜色</td>
<td>string</td>
<td>#ffffff</td>
</tr>
<tr>
<td>foreground</td>
<td>二维码前景颜色</td>
<td>string</td>
<td>#000000</td>
</tr>
<tr>
<td>calss</td>
<td>传递给二维码根元素的类名</td>
<td>string</td>
<td></td>
</tr>
</tbody>
</table>
</div></template>


